<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p v-focus>{{name}}</p> -->
        <!-- <p v-input>{{name}}</p> -->
        <!-- <p v-simple:aa.bb.cc="name">{{name}}</p> -->
        <p v-simple="'red'">{{name}}</p>

        <div v-simple="'green'">welcome</div>

        <h3 v-visiable="false">aaa</h3>
        
        <button @click="name='bbb'">按钮</button>
    </div>
</body>
<script>
    // 全局指令
    Vue.directive('simple',function(el,binding,vnode,oldVnode){
        console.log(el)
        console.log(binding)
        console.log(vnode)
        console.log(oldVnode)

        el.style.color = binding.value
    })

    Vue.directive('visiable',function(el,binding){
        el.style.display = binding.value ? 'block' : 'none'
    })

    var vm = new Vue({
        el:'#app',
        data:{
            name:'tom'
        },
        directives:{ // 自定义指令
            focus:{
                bind(){ // 常用
                    console.log('指令第一次绑定到元素时调用')
                },
                inserted(){
                    console.log('被绑定元素插入到DOM中时调用')
                },
                update(){ // 常用
                    console.log('被绑定元素所在节点更新时调用')
                },
            },
            // input(){
            //     console.log('bind和update......')
            // }
            input:{
                bind(){

                },
                update(){

                }
            }
        }
    })
</script>
</html>